<template>
	<scroll-view scroll-y="true" style="height: 100vh;" :scroll-top="scrollTop"  @scroll="scroll">
		<view class="header"></view>
		<view class="content">
			<view class="content-item">
				<view class="content-title">
					<text>我的邀请</text>
				</view>
				<view class="income-code">
					我的邀请码：{{userinfo.recommend_id}}
					<text class="text-line" @tap="copyshare">复制</text>
				</view>

				<view class="income-recode">
					<view class="recode-box">
						<view class="font-bigs">0</view>
						<view>今日有效邀请(人)</view>
					</view>

					<view class="recode-box">
						<view class="font-bigs">0</view>
						<view>总有效邀请(人)</view>
					</view>

					<view class="recode-box">
						<view class="font-bigs">0.0</view>
						<view>今日奖励(元)</view>
					</view>

					<view class="recode-box">
						<view class="font-bigs">0.0</view>
						<view>总奖励(元)</view>
					</view>
				</view>

				<view class="yaoqinghaoyou" @tap="shareshows">
					<text>立即邀请赚钱</text>
				</view>
			</view>

			<view class="content-item">
				<view class="content-title">
					<text>邀请简单三步</text>
				</view>
				<view class="invitat">
					<view class="invitat-icon">
						<image src="../../static/image/yq1.png" class="icon-img" mode="aspectFit"></image>
						<image src="../../static/image/jiantou.png" class="jiantou-img" mode="aspectFit"></image>
						<image src="../../static/image/yq2.png" class="icon-img" mode="aspectFit"></image>
						<image src="../../static/image/jiantou.png" class="jiantou-img" mode="aspectFit"></image>
						<image src="../../static/image/yq3.png" class="icon-img" mode="aspectFit"></image>
					</view>
				</view>
				<view class="invitat">
					<view class="invitat-box">
						<view class="invitat-index">1</view>
						<text>分享好友</text>
					</view>
					<view class="invitat-box">
						<view class="invitat-index">2</view>
						<text>用户下载APP并<br>激活账号</text>
					</view>
					<view class="invitat-box">
						<view class="invitat-index">3</view>
						<text>红包入账</text>
					</view>
				</view>
			</view>
			
			<view class="content-item">
				<view class="content-title">
					<text>邀请小技巧</text>
				</view>
				<view class="skill"@click="goTop">
					<text>1、邀请您的家人、同学、同事、朋友，成功率更高哦；</text>
					<text>2、分享到3个以上不同微信群，邀请成功率提升300%；</text>
					<text>3、成功邀请后，记得告知天天抽奖的新人奖励和每日的签到红包哦；</text>
					<text>4、好友收到邀请后，通过二维码或者链接进入推广页，根据提示下载安装引导完成即可；</text>
					<text>5、好友登陆APP后第一时间告诉他绑定您的邀请码后再激活，这样你才能得到邀请红包哦。</text>
				</view>
			</view>
			
			
		</view>

		<!--邀请好友-->
		<view class="share" v-if="showShare" :class="[animation?'moves':'selectedmove']">
			<view class="share-item" @click="sharequn">
				<image src="/static/image/friend.png"></image>
				<text>分享朋友</text>
			</view>
			<view class="share-item" @click="shareposter">
				<image src="/static/image/quan.png"></image>
				<text>朋友圈</text>
			</view>
		</view>
		<view @click="hiddenshow" class="marsk" :class="[animation?'opacitytest':'']" v-if="showShare"></view>
	</scroll-view>
</template>
<script>
	export default {
		data() {
			return {
				showShare: false,
				animation: false,
				userinfo: '',
				 scrollTop: 0,
				            old: {
				                scrollTop: 0
				            }
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('user_info');
		},
		onNavigationBarButtonTap() {  
		        console.log("点击了自定义按钮");  
		} ,
		methods: {
			 scroll(e) {
			            console.log(e)
			            this.old.scrollTop = e.detail.scrollTop;
			        },
			        goTop(e) {
			            this.scrollTop = this.old.scrollTop
						console.log(this.old.scrollTop);
			            this.$nextTick(function() {
			                this.scrollTop = 0
			            });
			            uni.showToast({
			                icon:"none",
			                title:"纵向滚动 scrollTop 值已被修改为 0"
			            })
			        },
			shareshows() {
				this.showShare = true;

				this.$nextTick(function() {
					setTimeout(() => {
						this.animation = true;
						//震动提醒
						uni.vibrateShort();
					}, 100)
				})
			},
			copyshare() {
				let _this = this;
				let copyStrings='我正在天天抽奖中赚话费，请下载APP，填写我的邀请码¥'+this.userinfo.recommend_id+"¥，我们一起来赚钱吧！"
				uni.setClipboardData({
					data: copyStrings,
					success: function() {
						_this.$ShowMsg('复制成功！')
					}
				});
			},
			hiddenshow() {
				//关闭时先播放完动画再隐藏
				this.animation = false;
				this.$nextTick(function() {
					setTimeout(() => {
						this.showShare = false;
					}, 100)
				})
			},
			//分享朋友或群
			sharequn() {
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://uniapp.dcloud.io/",
					title: "uni-app分享",
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					success: function(res) {
						_this.$ShowMsg('分享朋友朋友或群成功！')
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友失败！')
					}
				});
			},
			//分享到朋友圈
			shareposter() {
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 2,
					imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					success: function(res) {
						_this.$ShowMsg('分享朋友圈成功！')
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友圈失败！')
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #ff562f;
	}

	.font-bigs {
		font-size: 45rpx;
		font-weight: bold;
		color: #363636;
	}

	.header {
		width: 100vw;
		height: 424rpx;
		background-image: url(../../static/image/income-top.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.content {
		width: 100vw;
		height: auto;
		position: absolute;
		top: 425rpx;
		z-index: 10;

		.content-item {
			width: 95%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-bottom: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow:  5rpx 10rpx 8rpx #d23510;
			//邀请技巧
			.skill{
				width: 92%;
				font-size: 25rpx;
				color: #7d7d7d;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-bottom: 30rpx;
				text{
					margin: 12rpx 0;
				}
			}
			.invitat {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20rpx 0;
				margin-bottom: 40rpx;
				.invitat-box{
					margin: 0 20rpx;
					display: flex;
					font-size: 25rpx;
					justify-content: center;
					align-items: center;
					color: #7d7d7d;
					margin-bottom: 10rpx;
					.invitat-index{
						margin-right: 10rpx;
						font-size: 25rpx;
						width: 30rpx;
						height: 30rpx;
						color: #fff;
						background-color: #f7b500;
						border: 11rpx solid #fce199;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				.invitat-icon {
					display: flex;
					justify-content: center;
					align-items: center;
					.jiantou-img {
						width: 23rpx;
						height: 22rpx;
						margin: 0 40rpx;
					}

					.icon-img {
						width: 144rpx;
						height: 144rpx;
					}
				}
			}

			.content-title {
				background-image: url(../../static/image/income-title.png);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 35rpx;
				width: 383rpx;
				height: 77rpx;
				background-repeat: no-repeat;
				background-size: cover;
				margin: 30rpx 0;
			}

			.income-code {
				background-color: #6990d5;
				padding: 0 30rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 30rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;

				.text-line {
					text-decoration: underline;
					margin-left: 10rpx;
				}
			}

			//邀请记录
			.income-recode {
				width: 68%;
				margin: 10rpx auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;

				.recode-box {
					font-size: 28rpx;
					color: #7d7d7d;
					margin: 20rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}

			//邀请好友
			.yaoqinghaoyou {
				width: 423rpx;
				height: 105rpx;
				background-image: url(../../static/image/income-botton.png);
				background-repeat: no-repeat;
				background-size: cover;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx auto;
				margin-bottom: 35rpx;

				text {
					font-size: 38rpx;
					color: #fff;
					letter-spacing: 2rpx;
				}
			}
		}
	}

	//遮罩层
	.marsk {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition-property: opacity;
		transition-duration: 0.2s;
		opacity: 0;
		z-index: 990;
		background-color: #000;
	}

	.opacitytest {
		opacity: 0.5;
	}

	.moves {
		transform: translateY(0);
	}

	.selectedmove {
		transform: translateY(350rpx);
	}

	.share-botton {
		font-weight: bold;
		width: 80%;
		margin: 0 auto;
		height: 120rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		font-size: 32rpx;
	}

	.yaoqing {
		margin-right: 15rpx;
	}

	.share-left {
		display: flex;
		flex-direction: column;
		color: #bc5300;
		background-color: #fdd2b0;
		justify-content: center;
		align-items: center;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		flex: 2;
	}

	.share-right {
		flex: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #0f8cfa;
		font-size: 35rpx;
	}

	.copybg {
		background-color: #fd8425;
		font-size: 25rpx;
		color: #fff;
		border-radius: 10rpx;
		width: 75rpx;
		text-align: center;
	}

	.share-code {
		width: 80%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/*分享操作*/
	.share {
		position: fixed;
		display: flex;
		bottom: 0;
		z-index: 999;
		background-color: #fff;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		width: 100vw;
		height: 350rpx;
		justify-content: space-around;
		align-items: center;
		transition-property: transform;
		transition-duration: 0.1s;
		transition-timing-function: cubic-bezier(.5, .49, .57, 1.21);

		.share-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	.share image {
		height: 127rpx;
		width: 125rpx;
		margin-bottom: 20rpx;
	}

	.share text {
		color: #303030;
		font-size: 30rpx;
		margin-bottom: 15rpx;
	}
</style>
